<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr {
            height: 41px;
            font-size: 18px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div style="position: fixed; display: block; height: 100%; overflow-y: scroll; width: 100%;">
        <div>
            <input type="text" id="input1">
            <input type="button" value="搜索" onclick="mySet()">
        </div>
        <table id="table1" style="width: 100%; padding: 26px 43px;">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="mydiv"
        style="position: fixed; display: block; height: 100%; width: 100%; overflow-y: scroll; top: 0px; z-index: 100; background-color: #e9e9e9; padding: 20px; box-sizing: border-box;">
        <div onclick="remove()"
            style="position: absolute; top: 23px; right: 30px; width: 40px; height: 40px; background-color: #f32e2e; border-radius: 50%; display: flex; justify-content: center; justify-items: center; align-items: center; font-size: 36px; line-height: 1; color: #fff;">
            x</div>
        <div style="display: block; text-align: center; height: 46px;">
            <input type="text" id="input1" onchange="search()"
                style="height: 33px; border-radius: 6px; padding: 5px 10px; font-size: 20px;">
            <input type="button" value="搜索" onclick="search()"
                style="font-size: 20px; background-color: #977a7a; padding: 5px 10px; border-radius: 6px;">
        </div>
        <table id="table1" style="width: 100%; padding: 26px 43px;margin: 10px 20px;"> </table>
    </div>
</body>
<script>
    let obj = {
        'djfeo': {
            type: '计算机的',
            name: '计算机的',
            href: '计算机的',
            node: '计算机的',
            author: '计算机的',
        },
    }

    function mySet() {
        let input1 = document.getElementById('input1');
        setTable(input1.value);
    }

    function init() {
        remove()
        let html = `
                <div id="mydiv"
                    style="position: fixed; display: block; height: 100%; width: 100%; overflow-y: scroll; top: 0px; z-index: 100; background-color: #e9e9e9; padding: 20px; box-sizing: border-box;">
                    <div onclick="remove()"
                        style="position: absolute; top: 23px; right: 30px; width: 40px; height: 40px; background-color: #f32e2e; border-radius: 50%; display: flex; justify-content: center; justify-items: center; align-items: center; font-size: 36px; line-height: 1; color: #fff;">
                        x</div>
                    <div style="display: block; text-align: center; height: 46px;">
                        <input type="text" id="input1" onchange="search()"
                            style="height: 33px; border-radius: 6px; padding: 5px 10px; font-size: 20px;">
                        <input type="button" value="搜索" onclick="search()"
                            style="font-size: 20px; background-color: #977a7a; padding: 5px 10px; border-radius: 6px;">
                    </div>
                    <table id="table1" style="width: 100%; padding: 26px 43px;margin: 10px 20px;"> </table>
                </div>
            `
        $(document.body).append(html)
        setTable(db.getData());
    }

    function search() {
        let value = document.getElementById('input1').value;
        let data = {};
        let sou = db.getData();
        Object.keys(sou).filter((res) => {
            if (res.includes(value)) {
                console.log(res)
                data[res] = sou[res];
            }
        })
        setTable(data);
    }

    function remove() {
        let mydiv = document.getElementById('mydiv') && document.getElementById('mydiv').remove()
    }

    function setTable(obj) {
        let data;
        try {
            data = JSON.parse(obj);
        } catch (e) {
            data = obj;
        }
        let html = '';
        Object.keys(data).forEach((item) => {
            let res = data[item];
            html += `<tr style="height: 41px; font-size: 18px;">
            <td><a href="${res.href}" target="_blank" style="text-decoration: none;color: #ff2020;">${res.name}</a></td>
            <td>${res.node}</td>
            <td>${res.author}</td>
            <td>${res.type}</td>
        </tr>`;
        })
        document.getElementById('table1').innerHTML = html;
    }

    setTable(obj)
</script>

</html>